<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #f72585;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #06ffa5;
            --warning-color: #ffbe0b;
            --info-color: #00b4d8;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            line-height: 1.6;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
            display: flex;
            align-items: center;
        }
        
        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }
        
        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            margin: 0 10px;
            transition: all 0.3s ease;
            border-radius: 4px;
            padding: 8px 16px !important;
        }
        
        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }
        
        /* 主要内容区域 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 统计卡片 */
        .stat-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            border-left: 4px solid var(--primary-color);
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(247, 37, 133, 0.1));
            border-radius: 50%;
            transform: translate(30px, -30px);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }
        
        .stat-card.users {
            border-left-color: var(--info-color);
        }
        
        .stat-card.roles {
            border-left-color: var(--success-color);
        }
        
        .stat-card.permissions {
            border-left-color: var(--warning-color);
        }
        
        .stat-card.views {
            border-left-color: var(--accent-color);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1rem;
        }
        
        .stat-icon.users {
            background: linear-gradient(135deg, #00b4d8, #0077b6);
        }
        
        .stat-icon.roles {
            background: linear-gradient(135deg, #06ffa5, #00b388);
        }
        
        .stat-icon.permissions {
            background: linear-gradient(135deg, #ffbe0b, #fb8500);
        }
        
        .stat-icon.views {
            background: linear-gradient(135deg, #f72585, #b5179e);
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--dark-color);
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            font-size: 1rem;
            color: #6c757d;
            font-weight: 500;
        }
        
        /* 系统状态卡片 */
        .status-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .status-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .status-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--success-color);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(6, 255, 165, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(6, 255, 165, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(6, 255, 165, 0);
            }
        }
        
        .refresh-btn {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .refresh-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
        }
        
        /* 调试信息区域 */
        .debug-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .debug-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .debug-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .debug-content {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            max-height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        
        .debug-line {
            margin-bottom: 5px;
            padding: 4px 0;
        }
        
        .debug-timestamp {
            color: #6c757d;
            font-weight: 500;
        }
        
        /* 页脚 */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 2rem 0;
            margin-top: 3rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .stat-value {
                font-size: 2rem;
            }
            
            .navbar-brand {
                font-size: 1.2rem;
            }
        }
        
        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(67, 97, 238, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-shield-lock"></i>
                用户权限管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="bi bi-house-door"></i> 首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="api-test.html">
                            <i class="bi bi-bug"></i> API测试
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="toggleDebugInfo(); return false;">
                            <i class="bi bi-terminal"></i> 调试
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container main-container">
        <!-- 系统状态 -->
        <div class="row">
            <div class="col-12">
                <div class="status-card">
                    <div class="status-header">
                        <h2 class="status-title">系统概览</h2>
                        <div class="d-flex align-items-center">
                            <div class="status-indicator me-2"></div>
                            <span class="text-success">系统运行正常</span>
                            <button class="btn refresh-btn ms-3" onclick="loadStatistics()">
                                <i class="bi bi-arrow-clockwise"></i> 刷新数据
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计数据卡片 -->
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="stat-card users">
                    <div class="stat-icon users">
                        <i class="bi bi-people"></i>
                    </div>
                    <div class="stat-value" id="userCount">-</div>
                    <div class="stat-label">用户总数</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-card roles">
                    <div class="stat-icon roles">
                        <i class="bi bi-person-badge"></i>
                    </div>
                    <div class="stat-value" id="roleCount">-</div>
                    <div class="stat-label">角色总数</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-card permissions">
                    <div class="stat-icon permissions">
                        <i class="bi bi-key"></i>
                    </div>
                    <div class="stat-value" id="permissionCount">-</div>
                    <div class="stat-label">权限总数</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-card views">
                    <div class="stat-icon views">
                        <i class="bi bi-eye"></i>
                    </div>
                    <div class="stat-value" id="pageViewCount">-</div>
                    <div class="stat-label">页面访问量</div>
                </div>
            </div>
        </div>

        <!-- 调试信息区域 -->
        <div class="debug-section" id="debugInfo" style="display: none;">
            <div class="debug-header">
                <h3 class="debug-title">
                    <i class="bi bi-terminal"></i> 调试信息
                </h3>
                <button class="btn btn-sm btn-outline-secondary" onclick="clearDebugInfo()">
                    <i class="bi bi-trash"></i> 清空
                </button>
            </div>
            <div class="debug-content" id="debugContent"></div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>用户权限管理系统</h5>
                    <p>基于Spring Boot的用户权限管理系统，提供用户、角色和权限的完整管理功能。</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p>&copy; 2025 用户权限管理系统. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // API基础URL
        const baseUrl = '';
        
        // 切换调试信息显示
        function toggleDebugInfo() {
            const debugInfo = document.getElementById('debugInfo');
            if (debugInfo.style.display === 'none') {
                debugInfo.style.display = 'block';
            } else {
                debugInfo.style.display = 'none';
            }
        }
        
        // 清空调试信息
        function clearDebugInfo() {
            document.getElementById('debugContent').innerHTML = '';
        }
        
        // 更新调试信息
        function updateDebugInfo(message) {
            const debugContent = document.getElementById('debugContent');
            const timestamp = new Date().toLocaleTimeString();
            const debugLine = document.createElement('div');
            debugLine.className = 'debug-line';
            debugLine.innerHTML = `<span class="debug-timestamp">[${timestamp}]</span> ${message}`;
            debugContent.appendChild(debugLine);
            // 自动滚动到底部
            debugContent.scrollTop = debugContent.scrollHeight;
        }
        
        // 获取统计数据
        async function loadStatistics() {
            try {
                // 显示加载中状态
                document.getElementById('userCount').innerHTML = '<div class="loading"></div>';
                document.getElementById('roleCount').innerHTML = '<div class="loading"></div>';
                document.getElementById('permissionCount').innerHTML = '<div class="loading"></div>';
                document.getElementById('pageViewCount').innerHTML = '<div class="loading"></div>';
                
                // 清空调试信息
                document.getElementById('debugContent').innerHTML = '';
                updateDebugInfo('开始获取统计数据...');
                
                // 获取用户数据
                try {
                    updateDebugInfo('正在获取用户数据...');
                    const usersResponse = await fetch(`${baseUrl}/api/users`);
                    updateDebugInfo(`用户API响应状态: ${usersResponse.status}`);
                    
                    if (!usersResponse.ok) {
                        throw new Error(`HTTP错误! 状态: ${usersResponse.status}`);
                    }
                    
                    const usersData = await usersResponse.json();
                    console.log('用户数据:', usersData);
                    updateDebugInfo(`用户数据: ${JSON.stringify(usersData)}`);
                    
                    // 检查数据结构
                    let userCount = 0;
                    if (usersData && typeof usersData === 'object') {
                        if (usersData.code === 200 && usersData.data) {
                            if (Array.isArray(usersData.data)) {
                                userCount = usersData.data.length;
                            } else if (typeof usersData.data === 'object' && usersData.data.list) {
                                userCount = usersData.data.list.length;
                            } else if (typeof usersData.data === 'object' && usersData.data.records) {
                                userCount = usersData.data.records.length;
                            } else if (typeof usersData.data === 'number') {
                                userCount = usersData.data;
                            }
                        } else if (usersData.success === true && usersData.data) {
                            if (Array.isArray(usersData.data)) {
                                userCount = usersData.data.length;
                            } else if (typeof usersData.data === 'object' && usersData.data.list) {
                                userCount = usersData.data.list.length;
                            } else if (typeof usersData.data === 'object' && usersData.data.records) {
                                userCount = usersData.data.records.length;
                            } else if (typeof usersData.data === 'number') {
                                userCount = usersData.data;
                            }
                        }
                    }
                    
                    document.getElementById('userCount').textContent = userCount;
                    updateDebugInfo(`用户数量: ${userCount}`);
                } catch (error) {
                    console.error('获取用户数据失败:', error);
                    updateDebugInfo(`获取用户数据失败: ${error.message}`);
                    document.getElementById('userCount').textContent = '获取失败';
                }
                
                // 获取角色数据
                try {
                    updateDebugInfo('正在获取角色数据...');
                    const rolesResponse = await fetch(`${baseUrl}/api/roles`);
                    updateDebugInfo(`角色API响应状态: ${rolesResponse.status}`);
                    
                    if (!rolesResponse.ok) {
                        throw new Error(`HTTP错误! 状态: ${rolesResponse.status}`);
                    }
                    
                    const rolesData = await rolesResponse.json();
                    console.log('角色数据:', rolesData);
                    updateDebugInfo(`角色数据: ${JSON.stringify(rolesData)}`);
                    
                    // 检查数据结构
                    let roleCount = 0;
                    if (rolesData && typeof rolesData === 'object') {
                        if (rolesData.code === 200 && rolesData.data) {
                            if (Array.isArray(rolesData.data)) {
                                roleCount = rolesData.data.length;
                            } else if (typeof rolesData.data === 'object' && rolesData.data.list) {
                                roleCount = rolesData.data.list.length;
                            } else if (typeof rolesData.data === 'object' && rolesData.data.records) {
                                roleCount = rolesData.data.records.length;
                            } else if (typeof rolesData.data === 'number') {
                                roleCount = rolesData.data;
                            }
                        } else if (rolesData.success === true && rolesData.data) {
                            if (Array.isArray(rolesData.data)) {
                                roleCount = rolesData.data.length;
                            } else if (typeof rolesData.data === 'object' && rolesData.data.list) {
                                roleCount = rolesData.data.list.length;
                            } else if (typeof rolesData.data === 'object' && rolesData.data.records) {
                                roleCount = rolesData.data.records.length;
                            } else if (typeof rolesData.data === 'number') {
                                roleCount = rolesData.data;
                            }
                        }
                    }
                    
                    document.getElementById('roleCount').textContent = roleCount;
                    updateDebugInfo(`角色数量: ${roleCount}`);
                } catch (error) {
                    console.error('获取角色数据失败:', error);
                    updateDebugInfo(`获取角色数据失败: ${error.message}`);
                    document.getElementById('roleCount').textContent = '获取失败';
                }
                
                // 获取权限数据
                try {
                    updateDebugInfo('正在获取权限数据...');
                    const permissionsResponse = await fetch(`${baseUrl}/api/permissions`);
                    updateDebugInfo(`权限API响应状态: ${permissionsResponse.status}`);
                    
                    if (!permissionsResponse.ok) {
                        throw new Error(`HTTP错误! 状态: ${permissionsResponse.status}`);
                    }
                    
                    const permissionsData = await permissionsResponse.json();
                    console.log('权限数据:', permissionsData);
                    updateDebugInfo(`权限数据: ${JSON.stringify(permissionsData)}`);
                    
                    // 检查数据结构
                    let permissionCount = 0;
                    if (permissionsData && typeof permissionsData === 'object') {
                        if (permissionsData.code === 200 && permissionsData.data) {
                            if (Array.isArray(permissionsData.data)) {
                                permissionCount = permissionsData.data.length;
                            } else if (typeof permissionsData.data === 'object' && permissionsData.data.list) {
                                permissionCount = permissionsData.data.list.length;
                            } else if (typeof permissionsData.data === 'object' && permissionsData.data.records) {
                                permissionCount = permissionsData.data.records.length;
                            } else if (typeof permissionsData.data === 'number') {
                                permissionCount = permissionsData.data;
                            }
                        } else if (permissionsData.success === true && permissionsData.data) {
                            if (Array.isArray(permissionsData.data)) {
                                permissionCount = permissionsData.data.length;
                            } else if (typeof permissionsData.data === 'object' && permissionsData.data.list) {
                                permissionCount = permissionsData.data.list.length;
                            } else if (typeof permissionsData.data === 'object' && permissionsData.data.records) {
                                permissionCount = permissionsData.data.records.length;
                            } else if (typeof permissionsData.data === 'number') {
                                permissionCount = permissionsData.data;
                            }
                        }
                    }
                    
                    document.getElementById('permissionCount').textContent = permissionCount;
                    updateDebugInfo(`权限数量: ${permissionCount}`);
                } catch (error) {
                    console.error('获取权限数据失败:', error);
                    updateDebugInfo(`获取权限数据失败: ${error.message}`);
                    document.getElementById('permissionCount').textContent = '获取失败';
                }
                
                // 获取页面访问数据
                try {
                    updateDebugInfo('正在获取页面访问数据...');
                    const pageViewResponse = await fetch(`${baseUrl}/api/stats/page-views`);
                    updateDebugInfo(`页面访问API响应状态: ${pageViewResponse.status}`);
                    
                    if (!pageViewResponse.ok) {
                        throw new Error(`HTTP错误! 状态: ${pageViewResponse.status}`);
                    }
                    
                    const pageViewData = await pageViewResponse.json();
                    console.log('页面访问数据:', pageViewData);
                    updateDebugInfo(`页面访问数据: ${JSON.stringify(pageViewData)}`);
                    
                    // 检查数据结构
                    let pageViewCount = 0;
                    if (pageViewData && typeof pageViewData === 'object') {
                        if (pageViewData.code === 200 && pageViewData.data) {
                            if (typeof pageViewData.data === 'number') {
                                pageViewCount = pageViewData.data;
                            } else if (typeof pageViewData.data === 'object' && pageViewData.data.totalViews !== undefined) {
                                pageViewCount = pageViewData.data.totalViews;
                            } else if (typeof pageViewData.data === 'object' && pageViewData.data.count !== undefined) {
                                pageViewCount = pageViewData.data.count;
                            }
                        } else if (pageViewData.success === true && pageViewData.data) {
                            if (typeof pageViewData.data === 'number') {
                                pageViewCount = pageViewData.data;
                            } else if (typeof pageViewData.data === 'object' && pageViewData.data.totalViews !== undefined) {
                                pageViewCount = pageViewData.data.totalViews;
                            } else if (typeof pageViewData.data === 'object' && pageViewData.data.count !== undefined) {
                                pageViewCount = pageViewData.data.count;
                            }
                        }
                    }
                    
                    document.getElementById('pageViewCount').textContent = pageViewCount;
                    updateDebugInfo(`页面访问次数: ${pageViewCount}`);
                } catch (error) {
                    console.error('获取页面访问数据失败:', error);
                    updateDebugInfo(`获取页面访问数据失败: ${error.message}`);
                    document.getElementById('pageViewCount').textContent = '获取失败';
                }
                
                updateDebugInfo('所有统计数据获取完成');
                
            } catch (error) {
                console.error('获取统计数据失败:', error);
                updateDebugInfo(`获取统计数据失败: ${error.message}`);
                // 显示错误信息
                document.getElementById('userCount').textContent = '获取失败';
                document.getElementById('roleCount').textContent = '获取失败';
                document.getElementById('permissionCount').textContent = '获取失败';
                document.getElementById('pageViewCount').textContent = '获取失败';
            }
        }
        
        // 页面加载时自动获取统计数据
        document.addEventListener('DOMContentLoaded', function() {
            loadStatistics();
        });
    </script>
</body>
</html>